<template>
    <div class="main-header">

        <el-dropdown >
            <span class="el-dropdown-link">
                <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </span>
            <template #dropdown>
                <el-dropdown-menu class="dropdown-menu">
                    <el-dropdown-item @click="selectMenu(index)" v-for="(item, index) in menuList" :key="index">{{
                        item.activeName
                    }}</el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>


<script lang="ts" setup>
const menuList = [
    {
        activeName: "个人资料",
    },
    {
        activeName: "退出系统"
    }
]

const selectMenu=(index:number)=>{
    console.log(index)
    if(index==1){
        
    }
}
</script>

<style lang="less" scoped>
.main-header {
    background-color: #fff;
    height: 100%;
    line-height: 60px;
    position: relative;

    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
}

/deep/ .el-dropdown{
    position: absolute !important;
    right: 50px;
    top: 15px;
}

/deep/ .el-dropdown-menu__item{
    justify-content: center;
}
</style>